<template>
  <div class="course_box" v-loading="loading">
    <div class="course_addbtn">
      <span style="margin-left: 12px">学期：</span>
      <el-select
        v-model="selectedSemesterId"
        placeholder="请选择学期"
        clearable
        filterable
        @change="getCourseInfoPage()"
      >
        <el-option
          v-for="item in semesterOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <el-table
      :data="courseDatas"
      border
      :header-row-style="{ color: '#232324', fontWeight: 'bold' }"
    >
      <el-table-column
        align="center"
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
      />
      <el-table-column
        align="center"
        label="课程名称"
        min-width="120"
        prop="courseName"
      />
      <el-table-column
        align="center"
        label="老师"
        min-width="120"
        prop="teacher.name"
      />
      <el-table-column
        align="center"
        label="教室"
        min-width="120"
        prop="classroom"
      />
      <el-table-column
        align="center"
        label="周数"
        min-width="120"
        prop="weekNumber"
        sortable
      />
      <el-table-column
        align="center"
        label="描述"
        min-width="180"
        prop="description"
      />
      <el-table-column
        align="center"
        label="次数"
        min-width="120"
        prop="lessonNumber"
      />
      <el-table-column
        align="center"
        label="节数"
        min-width="120"
        prop="classNumber"
      />

      <el-table-column
        align="center"
        label="星期几"
        min-width="120"
        prop="dayOfWeek"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { reqGetSemesterOption } from '@/api/semester'
import { OptionType } from '@/api/user/type'
import useUserStore from '@/store/modules/user'
import { reqGetScheduleByStu, reqGetScheduleByTea } from '@/api/schedule'
import { ScheduleType } from '@/api/schedule/type'

onMounted(async () => {
  await getSemesterOption()
  await getCourseInfoPage()
})

const userStore = useUserStore()
const courseDatas = ref<ScheduleType[]>()
const loading = ref(false)
const semesterOptions = ref<OptionType[]>([])
const selectedSemesterId = ref<number>(0)

const indexMethod = (index: number) => {
  return index + 1
}

const getCourseInfoPage = async () => {
  loading.value = true
  try {
    if (userStore.userInfo.roleIds.includes(3)) {
      const { data } = await reqGetScheduleByStu(selectedSemesterId.value)
      courseDatas.value = data
    } else if (userStore.userInfo.roleIds.includes(4)) {
      const { data } = await reqGetScheduleByTea(selectedSemesterId.value)
      courseDatas.value = data
    } else {
      return
    }
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

const getSemesterOption = async () => {
  try {
    const { data } = await reqGetSemesterOption()
    semesterOptions.value = data
    selectedSemesterId.value = data[0].id
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  }
}
</script>
<style scoped lang="scss">
.course_box {
  padding: 24px;

  .course_addbtn {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }
}
</style>
